<template>
  <div>
    <div class="tools-div">
      <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>
    <!-- 展示品牌的表格 -->
    <div>
      <el-table :data="brands" style="width: 100%">
        <el-table-column prop="name" label="品牌名称" />
        <el-table-column prop="logo" label="品牌图标" #default="scope">
          <img :src="scope.row.logo" width="50" />
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          #default="scope"
        >
          <el-button
            type="primary"
            size="small"
            @click="handleShowUpdateDialog(scope.row)"
          >
            修改
          </el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row)">
            删除
          </el-button>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[1, 2, 3, 4, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="initData"
        @current-change="initData"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
      <el-form label-width="120px">
        <el-form-item label="品牌名称">
          <el-input v-model="brand.name" />
        </el-form-item>
        <el-form-item label="品牌图标">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="headers"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
          >
            <img v-if="brand.logo" :src="brand.logo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveOrUpdate">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useApp } from '@/pinia/modules/app'
import {
  GetBrands,
  GetBrandById,
  SaveBrand,
  UpdateBrand,
  DeleteBrandById,
} from '@/api/brand'
import { ElMessage } from 'element-plus'
// 定义提交表单数据模型
const defaultForm = {
  logo: '',
}
const brand = ref(defaultForm)
const dialogVisible = ref(false)

// 显示添加品牌表单
const addShow = () => {
  //打开对话框清除缓存
  brand.value = {
    logo: '',
  }
  dialogVisible.value = true
}
const handleSaveOrUpdate = () => {
  if (brand.value.id) {
    //更新
    handleUpdate()
  } else {
    //新增
    handleSave()
  }
}
//4、更新品牌
//回显弹出更新对话框
const handleShowUpdateDialog = row => {
  //查询要修改的品牌数据：一般必须查询数据库最新的数据
  //直接使用row回显：
  //浅拷贝： 将对象的引用直接赋值给另一个变量   两个变量指向同一个对象，任何一个修改了另一个也会被修改
  // brand.value = row
  //深拷贝： 将一个对象的属性值拷贝给另一个对象的相同属性
  brand.value = JSON.parse(JSON.stringify(row))
  //显示对话框
  dialogVisible.value = true
}
//提交更新请求
const handleUpdate = async () => {
  await UpdateBrand(brand.value)
  ElMessage.success('更新成功')
  dialogVisible.value = false
  initData()
}
//3、新增品牌
const uploadUrl = 'http://localhost:8081/admin/system/file/upload/logo'
//携带token的请求头
const headers = { token: useApp().authorization.token }
//上传成功回调: 上传成功响应报文状态码为200回调
const handleUploadSuccess = response => {
  if (+response.code === 200) {
    brand.value.logo = response.data
    ElMessage.success('上传成功')
  } else {
    ElMessage.error(response.message)
  }
}
const handleUploadError = error => {
  ElMessage.error('网络连接失败')
}
//新增： 新增对话框提交按钮事件函数
const handleSave = async () => {
  await SaveBrand(brand.value)
  dialogVisible.value = false
  initData()
}
//2、删除指定品牌
const handleDel = async row => {
  //弹出确认提示：
  await DeleteBrandById(row.id)
  initData()
}
//1、加载品牌默认数据展示
const brands = ref([])
const pageNum = ref(1)
const pageSize = ref(3)
const initData = async () => {
  const { data } = await GetBrands(pageNum.value, pageSize.value)
  brands.value = data.list
  total.value = data.total
}
const total = ref(0)
onMounted(() => {
  initData()
})
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
